<template>
  <div class="analysis">
    <div class="analysis-left">
      <div class="realscore">
        <p class="subheading">实时分值</p>
        <div style="padding: 15px 15px 0 15px">
          更新时间：<span id="areaName">{{ this.targetlist.realDate }}</span>
        </div>
        <span class="ceil" style="margin-left: 180px">
          <!-- <div class="loader loader4 loader4-green duration-3s-after">
            <a href="javascript:;">{{ this.targetlist.realValue }}</a>
          </div> -->
          <strong style="display: block; text-align: center; margin-top: 10px"
            >综合得分</strong
          >
        </span>
        <div style="padding: 0 15px 15px 15px">
          <p class="smalltitle">固有风险指标</p>
          <el-progress
            :text-inside="true"
            :stroke-width="20"
            :percentage="this.targetlist.realData1"
          ></el-progress>
          <p class="smalltitle">人员安全风险分析指标</p>
          <el-progress
            :text-inside="true"
            :stroke-width="20"
            :percentage="this.targetlist.realData2"
            status="success"
          ></el-progress>
          <p class="smalltitle">设备安全风险分析指标</p>
          <el-progress
            :text-inside="true"
            :stroke-width="20"
            :percentage="this.targetlist.realData3"
            status="warning"
          ></el-progress>
          <p class="smalltitle">环境安全风险分析指标</p>
          <el-progress
            :text-inside="true"
            :stroke-width="20"
            :percentage="this.targetlist.realData4"
            status="exception"
          ></el-progress>
        </div>
      </div>
      <div class="pointssort">
        <p class="subheading">扣分项排名</p>
        <div class="substance">
          <echarts :chartData="echartData.Points"></echarts>
        </div>
      </div>
    </div>
    <div class="analysis-right">
      <div class="analyse">
        <p class="subheading">趋势分析</p>
        <div class="substance">
          <div style="padding-left: 40px">
            <span id="LayuiShowDateSpan" style="display: inline-block">
              <el-date-picker
                v-model="datetime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                id="LayuiShowDate"
                v-if="this.value === '1'"
              >
              </el-date-picker>
              <el-date-picker
                v-model="datetime"
                type="month"
                value-format="yyyy-MM"
                placeholder="选择月份"
                id="LayuiShowDate"
                v-if="this.value === '2'"
              >
              </el-date-picker>
              <el-date-picker
                v-model="datetime"
                type="year"
                value-format="yyyy"
                placeholder="选择年"
                id="LayuiShowDate"
                v-if="this.value === '3'"
              >
              </el-date-picker>
            </span>
            <el-select
              v-model="value"
              style="width: 100px; margin: 0 10px"
              @change="gettime"
            >
              <el-option value="1" label="日"></el-option>
              <el-option value="2" label="月"></el-option>
              <el-option value="3" label="年"></el-option>
            </el-select>
            <el-button type="primary" @click="Trend"
              ><i class="el-icon-search"></i
            ></el-button>
          </div>
          <echarts
            :chartData="echartData.Trend"
            style="height: 220px"
          ></echarts>
        </div>
      </div>
      <div class="analyse">
        <p class="subheading">改进建议</p>
        <div class="substance">
          <ul class="proposal">
            <li v-for="(item, index) in list" :key="item.index">
              <span>{{ index + 1 }}</span
              ><span>{{ item }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Echarts from '@/components/Echarts/index.vue'
export default {
  components: {
    Echarts
  },
  data() {
    return {
      datetime: '',
      value: '1',
      echartData: {
        Points: {
          xData: [],
          series: []
        },
        Trend: {
          xData: [],
          series: []
        }
      },
      list: {},
      targetlist: {
        realDate: null,
        realValue: null,
        realData1: null,
        realData2: null,
        realData3: null,
        realData4: null
      }
    }
  },
  methods: {
    gettime() {
      this.datetime = null
    },
    SafeRiskDetail() {
      this.$http.get('/home/aqfx').then(res => {
        // res = res.data
        if (res.code === 200) {
          this.targetlist = res.data
          this.list = res.data.ideas
          this.echartData.Points.xData = res.data.kouFenTopList.map(
            item => item.primaryIndicatorsName
          )
          this.echartData.Points.series.push({
            name: '安全',
            data: res.data.kouFenTopList.map(
              item => item.primaryIndicatorsScore
            ),
            type: 'bar',
            barWidth: '20',
            itemStyle: {
              color: '#F56C6C',
              barBorderRadius: [18, 18, 0, 0]
            }
          })
        }
      })
    },
    Trend() {
      this.echartData.Trend.xData = []
      this.echartData.Trend.series = []
      this.$http
        .get(
          '/home/qsfx?createDate=' + this.datetime + '&timeType=' + this.value
        )
        .then(res => {
          // res = res.data
          if (res.code === 200) {
            this.echartData.Trend.xData = res.data.names
            this.echartData.Trend.series.push({
              name: '固有风险',
              data: res.data.str1,
              type: 'line',
              color: '#409EFF'
            })
            this.echartData.Trend.series.push({
              name: '人员安全风险',
              data: res.data.str2,
              type: 'line',
              color: '#67C23A'
            })
            this.echartData.Trend.series.push({
              name: '设备安全风险',
              data: res.data.str3,
              type: 'line',
              color: '#E6A23C'
            })
            this.echartData.Trend.series.push({
              name: '环境安全风险',
              data: res.data.str4,
              type: 'line',
              color: '#F56C6C'
            })
          }
        })
    }
  },
  created() {
    this.SafeRiskDetail()
    this.Trend()
  }
}
</script>

<style lang="scss">
.analysis {
  color: #fff;
  .el-progress-bar__inner:first-child {
    border: 1px solid #04b2f7;
    background-color: #116be0d9;
  }
  .el-progress-bar__inner:nth-child(2) {
    border: 1px solid #dbf704;
    background-color: #bdaa11c0;
  }
  .el-progress-bar__inner:nth-child(3) {
    border: 1px solid #04f79a;
    background-color: #128b67c0;
  }
  .el-progress-bar__inner:nth-child(4) {
    border: 1px solid #ef7cd6;
    background-color: #8b1263c0;
  }
  .el-progress-bar__outer {
    background-color: #0b1f4c !important;
    border: 1px solid #185bbf !important;
  }
}
</style>
